<template>
  <!-- el-dropdown组件用于实现下拉菜单功能 -->
  <el-dropdown @command="handleCommand">
    <div class="">
      <!-- 插槽用于自定义触发器，传递loading状态 -->
      <slot v-bind="{ loading }" />
    </div>

    <!-- 定义下拉菜单模板 -->
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 遍历选项生成下拉菜单项 -->
        <el-dropdown-item
          v-for="item of options"
          :key="item.value"
          :command="item.value"
          :title="item.title"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
// 导入sleep函数用于添加延迟
import { sleep } from '$/utils'

export default {
  // 定义组件属性
  props: {
    device: {
      type: Object,
      default: () => ({}),
    },
  },
  // 定义组件数据
  data() {
    return {
      loading: false,
    }
  },
  // 计算属性，根据loading状态动态生成下拉菜单选项
  computed: {
    options() {
      const value = []

      if (this.loading) {
        // 如果处于loading状态，只显示关闭选项
        value.push({
          label: window.t('device.control.mirror-group.close'),
          value: 'close',
          title: window.t('device.control.mirror-group.close.tips'),
        })
      }
      else {
        // 否则，显示1到4的镜像组开放选项
        value.push(
          ...[1, 2, 3, 4].map(item => ({
            label: this.$t('device.control.mirror-group.open', { num: item }),
            value: item,
          })),
        )
      }

      return value
    },
  },
  methods: {
    // 生成scrcpy参数的方法
    scrcpyParams(...args) {
      return this.$store.preference.scrcpyParameter(...args)
    },
    // 获取偏好数据的方法
    preferenceData(...args) {
      return this.$store.preference.getData(...args)
    },
    // 处理下拉菜单命令的方法
    async handleCommand(command) {
      await sleep(300)

      // 根据命令执行对应操作
      if (command === 'close') {
        this.handleStop()
        this.loading = false
        return false
      }

      this.loading = true

      try {
        // 调用mirroring功能并处理结果
        const res = await this.$scrcpy.mirrorGroup(this.device.id, {
          openNum: command,
          title: ({ displayId }) =>
            `${this.$store.device.getLabel(
              this.device,
            )}-displayId-${displayId}`,
          args: this.scrcpyParams(this.device.id),
        })

        res.forEach((item) => {
          if (item.status === 'rejected') {
            throw item.reason || item
          }
        })
      }
      catch (error) {
        // 错误处理
        console.warn('error.message', error.message)
        if (error?.message || error?.cause?.message) {
          this.$message.warning(error?.message || error?.cause?.message)
        }
      }

      this.handleStop()
      this.loading = false
    },
    // 停止mirroring功能的方法
    handleStop() {
      this.$adb.clearOverlayDisplayDevices(this.device.id)
    },
  },
}
</script>

<style></style>
